<template>
  <div>
    <v-header title="商品搜索">
      <v-back></v-back>
    </v-header>
    <van-search
      v-model="value"
      shape="square"
      background="#FF6347"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <main>
      <van-empty v-if="!list" description="抱歉，没有找到相关内容" />
      <div class="goods" v-for="item in list" :key="item.id" @click="todetail(item.id,item.goodsname)">
        <van-image
          width="1rem"
          height="1rem"
          fit="contain"
          :src="'http://localhost:3000' + item.img"
        />
        <div>
          <p class="goods_title">{{ item.goodsname }}</p>
          <p class="now_price">￥{{ item.price }}</p>
          <p class="comment">3565评论</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { doSearch } from "@/request/api.js";
export default {
  data() {
    return {
      value: "",
      list: [],
    };
  },
  methods: {
    async onSearch(val) {
      let res = await doSearch(val);
      this.list=res.data.list
    },
    todetail(id,name){
      this.$router.push('/detail/'+id+'/'+name)
    }
  },
  created(){
    this.value=this.$route.query.keyword; 
    this.onSearch(this.value);
  }
  //   async created() {
  //     let req = await doSearch({
  //       keywords: this.value,
  //     });
  //   },
};
</script>
<style scoped>
.goods {
  margin: 0.1rem auto;
  width: 85%;
  padding: 0.1rem;
  display: flex;
}
.goods div {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.goods div .goods_title {
  font-size: 0.14rem;
}
.goods div .now_price {
  color: red;
  font-size: 0.14rem;
}
main {
  background-color: #fff;
  overflow: hidden;
}
.comment {
  font-size: 0.14rem;
  color: #ccc;
}
</style>